<template>
  <el-dialog :visible.sync="dialogVisible" title="修改单位信息" width="900px" :close-on-click-modal="false" v-drag2anywhere>
    <div style=" overflow: auto; padding: 5px 10px;">
       <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
         <el-row :gutter="5">
           <el-col :span="12">
             <el-form-item label="企业名称:"  prop="title">
               <el-input v-model="formData.title" placeholder="企业名称" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="纳税号码:"   prop="taxcode">
               <el-input v-model="formData.taxcode" placeholder="纳税号码" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="注册地址:"   prop="address">
               <el-input v-model="formData.address" placeholder="注册地址" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="联系电话:"   prop="mobile">
               <el-input v-model="formData.mobile" placeholder="联系电话" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="开户行:"  prop="bankname">
               <el-input v-model="formData.bankname" placeholder="开户行"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="银行账号:"   prop="bankid">
               <el-input v-model="formData.bankid" placeholder="银行账号" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col>
             <el-form-item label="区域:" prop="region_ids">
               <el-cascader ref="cityregion"
                   expand-trigger="hover"
                   :options="regionList" v-model="formData.region_ids" :props="{value:'region_id',label:'region_name'}"
                   @change="handleRegionChange">
                 </el-cascader>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="所属账套">
               <el-select v-model="formData.accountid" style="width: 100%;" @change="handleAccountChanged">
                 <el-option v-for="(item,index) in accounts" :label="item.name" :value="item.id" :key="item.id" ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
         formData: {
           id:-1,
           title: "",
           taxcode:'',
           bankname: '',
           bankid: '',
           mobile:'',
           region_values:[],
           region_ids:[],
           address:'',
         },
         accounts:[],
         suppliers:[],
         regionList:[],
         dialogVisible: true,
         rules: {
           title: [{
             required: true,
             "message": "客户抬头不能为空",
             trigger: blur
           }],
           region_ids: [{
             type:'array',
             required: true,
             "message": "客户所属行政区域不能为空!",
             trigger: 'change'
           }],
        }
      }
    },
    mounted() {
       this.axios.post("api/common/region/list").then(res=>{
          if(res.status==200 && res.data.code==0){
            this.regionList=res.data.data;
          }
        })
    },
    methods: {
      initData:function(data){
          this.formData=data;
          this.loadSuppliers();
      },
      handleRegionChange:function(reg){
        //this.formData.region_ids=this.$refs["cityregion"].value;
        console.log(this.$refs["cityregion"].getCheckedNodes()[0].pathNodes);
      },
      loadSuppliers(){
        this.axios.post("api/admin/account/list_item").then(res=>{
          if(res.status==200 && res.data.code==0){
            this.accounts=res.data.list;
          }
        })
      },

      handleAccountChanged(accountid){
        var option = this.accounts.filter(function(cur, index, a) {
          if (cur.id == accountid) {
            return cur;
          }
        })[0];
        this.formData.accountid=option.id;
        this.formData.account=option.name;
      },
      handleSave: function() {
        this.$refs.form.validate((ok) => {
          if (ok) {
               let params = {
                 id:this.formData.id,
                 title: this.formData.title,
                 taxcode:this.formData.taxcode,
                 bankname: this.formData.bankname,
                 bankid: this.formData.bankid,
                 mobile:this.formData.mobile,
                 region_ids: this.formData.region_ids,
                 region_values:this.formData.region_values,
                 accountid:this.formData.accountid,
                 account:this.formData.account,
                 address:this.formData.address
            };

             this.axios.post("api/admin/client/update",params).then((res)=>{
               if(res.status==200 && res.data.code==0){
                  this.$message.success({message:res.data.msg,showClose:true,duration:1000});
                  this.dialogVisible=false;
                  this.$emit("closeHandler",params);
               }else{
                 this.$alert(res.data.msg,"提示",{type:'error'});
               }
             })

            return true;
          }
          return false;
        })
      }
    }
  }
</script>

<style scoped>

</style>
